<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx语法规则</title>
    <style>
      .title {
        color: pink;
      }
    </style>
  </head>

  <body>
    <div id="test"></div>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      /*
      注意区分：js表达式和js代码
      1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

      */
      //模拟数据
      const data = ["苹果", "香蕉", "橘子"];
      //创建虚拟dom
      const vdom = (
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {data.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </div>
      );
      //渲染虚拟dom到页面
      ReactDOM.render(vdom, document.getElementById("test"));
    </script>
  </body>
</html>
